<template>
  <v-card>
    <v-layout row wrap>
      <v-flex xs6>
        <v-btn round color="primary" dark @click="addList">添加模块</v-btn>
      </v-flex>
    </v-layout>
    <v-data-table
            :headers="headers"
            :items="desserts"
            :pagination.sync="pagination"
            :total-items="totalDesserts"
            :loading="loading"
            class="elevation-1"
    >
      <!--变量列表数据-->
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.childrenName }}</td>
        <td class="text-xs-center">{{ props.item.childrenPath }}</td>
        <td class="text-xs-center">{{ props.item.parentId }}</td>
        <td class="text-xs-center">{{ props.item.parentName }}</td>
        <td class="text-xs-center">{{ props.item.parentPath }}</td>
        <td class="justify-center layout px-0">
          <v-btn icon @click="editList(props.item)">
            <i class="el-icon-edit"/>
          </v-btn>
          <v-btn icon @click="deleteList(props.item)">
            <i class="el-icon-delete"/>
          </v-btn>
        </td>
      </template>
    </v-data-table>
    <!--弹出的对话框-->
    <v-dialog max-width="500" v-model="show" persistent scrollable>
      <list-form @close="closeWindow" :oldList="oldList" :isEdit="isEdit"/>
    </v-dialog>
  </v-card>
</template>
<script>

  import ListForm from './ListForm'
  export default {
    data () {
      return {
        totalDesserts: 0,//总记录数
        desserts: [],//当前页数据列表
        loading: true,//加载进度条效果
        pagination: {},//分页信息
        headers: [//表头信息
          { text: '当前模块编号', align: 'center', value: 'id' },
          { text: '子模块', align: 'center', value: 'childrenName' },
          { text: '子路径', align: 'center', sortable: false, value: 'childrenPath' },
          {text: '父模块编号', align: 'center', value: 'parentId'},
          { text: '父模块', align: 'center', value: 'parentName' },
          { text: '父路径', align: 'center', sortable: false, value: 'parentPath' },
        ],
        show: false,// 控制对话框的显示
        oldList: {}, // 即将被编辑的员工数据
        isEdit: false, // 是否是编辑
      }
    },
    watch: {
      pagination: {
        handler () {
          this.getDataFromServer()
                  .then(data => {
                    this.desserts = data.items
                    this.totalDesserts = data.total
                  })
        },
        deep: true
      }
    },
    mounted () {
      this.getDataFromServer()
              .then(data => {
                this.desserts = data.items
                this.totalDesserts = data.total
              })
    },
    methods: {
      deleteList(item){
        this.$http({
          method: 'delete',
          url: '/permission/delete/'+item.id,
        }).then(() => {
          this.$message.success("删除成功！");
          this.getDataFromServer();
        }).catch(() => {
          this.$message.error("删除失败！");
        });

      },
      getDataFromServer() { // 从服务的加载数的方法。
        // 发起请求
        this.$http.get("/permission/list/page", {
          params: {
            page: this.pagination.page,// 当前页
            rows: this.pagination.rowsPerPage,// 每页大小
          }
        }).then(resp => { // 这里使用箭头函数
          this.desserts = resp.data.items;
          this.totalDesserts = resp.data.total;
          // 完成赋值后，把加载状态赋值为false
          this.loading = false;
        })
        /*this.loading = true
        return new Promise((resolve, reject) => {
          const { sortBy, descending, page, rowsPerPage } = this.pagination

          let items = this.getDesserts()
          const total = items.length

          if (this.pagination.sortBy) {
            items = items.sort((a, b) => {
              const sortA = a[sortBy]
              const sortB = b[sortBy]

              if (descending) {
                if (sortA < sortB) return 1
                if (sortA > sortB) return -1
                return 0
              } else {
                if (sortA < sortB) return -1
                if (sortA > sortB) return 1
                return 0
              }
            })
          }

          if (rowsPerPage > 0) {
            items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage)
          }

          setTimeout(() => {
            this.loading = false
            resolve({
              items,
              total
            })
          }, 1)
        })*/
      },
      addList() {
        // 修改标记
        this.isEdit = false;
        // 控制弹窗可见：
        this.show = true;
        // 把oldList变为null
        this.oldList = {};
      },
      editList(oldList){
                  // 修改标记
                  this.isEdit = true;
                  // 控制弹窗可见：
                  this.show = true;
                  // 获取要编辑的brand
                  this.oldList = oldList;
                  // 回显商品分类
                  // this.oldList.permission = {childrenName: "首页", id: 1,parentId:0};//最快的测试时可以写假数据，看看可不可行
                                                            //假如后台返回的是假数据，看看效果怎样，就可以先写假数据
                  this.oldList.permission = {childrenName: oldList.parentName, id: oldList.parentId};
      },
      closeWindow(){
        // 重新加载数据
        this.getDataFromServer();
        // 关闭窗口
        this.show = false;
      }
    },
    components:{
      ListForm
    }
  }
</script>